<template>
	<div class="main">
		<el-main>
			<!-- 搜索框 -->
			<el-row justify="center">
				<el-col :span="23">
					<el-button type="danger">请输入查询内容</el-button>
					<el-input v-model="type" placeholder="请输入内容" />
					<el-button type="danger" @click="search()" >
						<el-icon class="el-icon--right"><search /></el-icon>
					</el-button>
				</el-col>
			</el-row>
			<div class="top-box_buttom"></div>
			<!-- 轮播图 -->
			   <el-carousel :interval="4000" type="card" indicator-position="none" height="300px"  v-if="imgFlag">
			       <el-carousel-item v-for="item in imgshow" :key="item.id">
			        <img style="width: 100%;height: 100%;" :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
			       </el-carousel-item>
			     </el-carousel>
		</el-main>
		<div class="main-contxt">
			<h6>好评最高5本书</h6>
			<ul>
				<li v-for="item in findRate5" :key='item.id'>
					<div>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥{{item.price}} 
						<el-button type="danger" size="mini" @click="purchase(item.id)">购买</el-button>
						</p>
					</div>
				</li>
			</ul>
			<h6>销售最高5本书</h6>
			<ul>
				<li v-for="item in findSale5" :key='item.id'>
					<div>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥{{item.price}} 
						<el-button type="danger" size="mini" @click="purchase(item.id)">购买</el-button></p>
					</div>
				</li>
			</ul>
			<h6>意向最高5本书</h6>
			<ul>
				<li v-for="item in findFav5" :key='item.id'>
					<div>
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						<p>{{item.name}}</p>
						<p>￥{{item.price}} 
						<el-button type="danger" size="mini" @click="purchase(item.id)">购买</el-button>
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	var that = null;
	import { ElMessage } from 'element-plus'
	import {mapState,mapMutations} from 'vuex';
	import {Search} from '@element-plus/icons-vue'
	export default{
		name:'Cart',
		data(){
			return{
				findFav5:[],
				findSale5:[],
				findRate5:[],
				imgshow:[],
				imgIndex:0,
				imgURL:'',
				type:'',
				imgFlag:false,
			}
		},
		components:{
			Search
		},
		methods:{
			//加入购物车
			purchase(id){
				if(!localStorage.getItem('role')){
					ElMessage({message:"请登录后操作！",type: "error"})
				}
				if(localStorage.getItem('role')=="P"){
					this.axios.get(`api/public/addCart/${id}`).then((res)=>{
						ElMessage({message:"加入购物车成功！",type: "success"})
					})
				}
			},
			//查询
			search(){
				this.getType(this.type)
				this.$router.push({path:'/detalist'})
			},
			...mapMutations(['getType']),
		},
		created() {
			that = this
			this.axios.get('/api/public/book/findRate5').then((res)=>{
				this.findRate5=res.data.data
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('/api/public/book/findSale5').then((res)=>{
				this.findSale5=res.data.data
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('/api/public/book/findFav5').then((res)=>{
				this.findFav5=res.data.data
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('/api/public/findHot/5/1').then((res)=>{
				this.imgshow =  res.data.data
				setTimeout(function(){
					that.imgFlag = true
				},1)
			}).catch((error)=>{
				console.log(error);
			})
			
		}
	}
</script>

<style scoped>
	.el-row{
		display: flex;
		width: 100%;
	}
	.el-col-23{
		display: flex;
	}
	.el-input{
		width: 80% !important;
	}
	.top-box_buttom{
		margin: 10px 0;
		border-bottom: 3px solid #f56c6c;
	}
	.el-carousel__item h3 {
	  color: #475669;
	  font-size: 14px;
	  opacity: 0.75;
	  line-height: 200px;
	  margin: 0;
	  text-align: center;
	}
	
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  background-color: #d3dce6;
	}
	 .main-banner{
			overflow: hidden;
			border: 1px solid #b2b2b2;
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main .main-banner .banner-img{
			width: 97%;
			height: 350px;
		}
		.main .main-banner .banner-img ul {
			width: 100%;
			height: 100%;
		}
		.main .main-banner .banner-img ul li{
			float: left;
			width: 100%;
			height: 100%;
		}
		.main .main-banner .banner-img ul li img{
			width: 100%;
			height: 100%;
		}
		.main .main-banner  span{
			color: #3d3df2;
			cursor: pointer;
			display: inline-block;
			font-size: 30px;
		}
		.main-contxt{
			width: 95%;
			margin: 0 auto;
		}
		.main-contxt h6{
			font-size: 15px;
			padding: 15px 0;
			color: #ff00ff;
			border-bottom: 1px solid #ff4500;
		}
		.main-contxt ul{
			padding: 0;
			margin: 0;
			width: 100%;
			overflow: hidden;
		}
		.main-contxt ul li {
			float: left;
			text-align: center;
			list-style: none;
			width: 20%;
		}
		.main-contxt ul li div p{
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
		}
		.main-contxt ul li div img{
			width: 80px;
			height: 100px;
		}
</style>
